<template>
	<view class="page">
		<view class="content">
			<img src="/static/status.png" class="header" alt="">
			<view class="header"></view>
			<view class="top">
				<view class="action">{{info.status_text}}</view>
				<view class="money"><text class="money-icon">￥</text>{{info.money}}</view>
			</view>
			<view class="info">
				<view class="item">
					<text class="title">流 水 号：</text>
					<text class="desc">{{info.order_sn}}</text>
				</view>
				<view class="item">
					<text class="title">创建时间：</text>
					<text class="desc">{{info.create_time}}</text>
				</view>
				<view class="item">
					<text class="title">提现至：</text>
					<text class="desc">微信钱包</text>
				</view>
				<view class="item">
					<text class="title">服务费：</text>
					<text class="desc">￥{{info.order_sn}}</text>
				</view>
				<view class="item">
					<text class="title">实际到账：</text>
					<text class="desc">￥{{info.result_money}}</text>
				</view>
				<view class="item" v-if="info.status != 20">
					<text class="title">到账时间：</text>
					<text class="desc">{{info.pay_time}}</text>
				</view>
			</view>
		</view>
		<view class="submit" @tap="onSubmit"  v-if="info.status == 20">
			立即提现
		</view>
		<view class="submit2" @tap="toLink">
			回到个人中心
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		geTel
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	const info = ref()
	const cash = ref()
	const id = ref('')
	onLoad(function(option) {
		id.value = option.id
		getWithdrawalInfo()
	});
	onShow(function() {
		getTocash()
	});
	function toLink(){
		setTimeout(() => {
			uni.switchTab({
				url:"/pages/Mine/mine/mine"
			})
		}, 500)
	}
	
	function onSubmit(){
		if (wx.canIUse('requestMerchantTransfer')) {
			uni.requestMerchantTransfer({
				mchId: cash.value.mchId,
				appId: cash.value.appId,
				package:cash.value.package,
				openId: cash.value.openId,
				success (res) {
					setTimeout(() => {
						uni.navigateTo({
							url:"/pages/Mine/mine/mine"
						})
					}, 2000)
				},
				fail (res) { 
					console.log(res)
				}
			})
		}
	}
	async function getWithdrawalInfo() {
		let object = {
			id:id.value
		}
		const {
			code,
			data
		} = await api.getWithdrawalInfo(object)
		if (code == 0) {
			info.value = data
		}
	}
	async function getTocash() {
		let object = {
			id:id.value
		}
		const {
			code,
			data
		} = await api.getTocash(object)
		if (code == 0) {
			cash.value = data
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped>
	.page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 140rpx;
	}
	.content{
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin:80rpx 20rpx 20rpx;
		position: relative;
	}
	.header{
		position: absolute;
		border: 4rpx solid #fff;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		/* background-color: #ff0520; */
		top: -50rpx;
		right: 300rpx;
		padding: 5rpx;
	}
	.top{
		margin-top: 50rpx;
		display: flex;
		text-align: center;
		justify-content: center;
		flex-direction: column;
	}
	.action{
		font-size: 30rpx;
	}
	.money{
		color: red;
		font-weight: bold;
		font-size: 36rpx;
		margin-top: 10rpx;
	}
	.money-icon{
		font-size: 24rpx;
	}
	.info{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		font-size: 28rpx;
	}
	.item{
		margin: 10rpx 0;
		display: flex;
		font-weight: 600;
		justify-content: space-between;
	}
	.title{
		color: #111;
	}
	.desc{
		color: #999;
	}
	.submit {
		text-align: center;
		font-size: 28rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		color: #fff;
		border-radius: 50rpx;
		margin: 140rpx 20rpx 20rpx;
		background-color: #ff0520;
	}
	.submit2 {
		text-align: center;
		font-size: 28rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		color: #ff0520;
		border-radius: 50rpx;
		margin: 20rpx;
		background-color: #eee;
	}
	.none {
		text-align: center;
		font-size: 28rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		color: #fff;
		border-radius: 50rpx;
		margin: 140rpx 20rpx 20rpx;
		background-color: #999;
	}
</style>
